import React, { Component } from 'react'
import { Radio, Checkbox, Input, Space } from 'antd'

import { numConvertToLetter } from '../../utils'

import './index.less'

const { TextArea } = Input

//试题细则
export default class QuestionFinalDetail extends Component {

    //作答
    answerChange = (questionNumber, value, questionType, index, optionLength) => {
        this.props.answerChange(questionNumber, value, questionType, index, optionLength)
    }

    render() {
        const { questionType, questionNumber, questionStem, questionScore, QuestionOptionViewModels, answerResult, type } = this.props

        return (
            <div className='preview-final-detail' id={`exer${questionNumber}`}>
                <ul className="preview-final-header">
                    <li>
                        {questionNumber}.
                        {type === 'child' && (
                            <>
                                [{questionType}]
                            </>
                        )}
                    </li>
                    <li>
                        <div dangerouslySetInnerHTML={{ __html: questionStem }}></div>
                    </li>
                    <li>
                        ({questionScore}分)
                    </li>
                </ul>
                {(questionType === '单选题' || questionType === '判断题') && (
                    <Radio.Group value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent} onChange={e => this.answerChange(questionNumber, e.target.value)} className='radio-group-style'>
                        <Space direction='vertical' size='middle' style={{ width: '100%' }}>
                            {QuestionOptionViewModels.map((option, index) => (
                                <Radio key={option.id} value={`${index + 1}`} className={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent == (index + 1) ? 'radio-style radio-style-hover' : 'radio-style'}>
                                    <div className='my-option-radio'>
                                        <>{numConvertToLetter(index + 1)}. </>
                                        <div dangerouslySetInnerHTML={{ __html: option.optionContent }}></div>
                                    </div>
                                </Radio>
                            ))}
                        </Space>
                    </Radio.Group>
                )}
                {questionType === '多选题' && (
                    <Checkbox.Group value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent} onChange={e => this.answerChange(questionNumber, e, '多选题')} className='checkbox-group-style'>
                        <Space direction='vertical' size='middle' style={{ width: '100%' }}>
                            {QuestionOptionViewModels.map((option, index) => (
                                <Checkbox key={option.id} value={`${index + 1}`} className={!answerResult.find(ele => ele.questionNumber === questionNumber).answerContent ? 'checkbox-style' : answerResult.find(ele => ele.questionNumber === questionNumber).answerContent.includes(index + 1 + '') ? 'checkbox-style option-selected' : 'checkbox-style'}>
                                    <div className='my-option-radio'>
                                        <>{numConvertToLetter(index + 1)}. </>
                                        <div dangerouslySetInnerHTML={{ __html: option.optionContent }}></div>
                                    </div>
                                </Checkbox>
                            ))}
                        </Space>
                    </Checkbox.Group>
                )}
                {questionType === '填空题' && (
                    <Input.Group>
                        {QuestionOptionViewModels.map((option, index) => (
                            <Input
                                key={option.id}
                                addonBefore={index + 1}
                                style={{ marginTop: 12 }}
                                value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent[index]}
                                onChange={e => this.answerChange(questionNumber, e.target.value, '填空题', index, QuestionOptionViewModels.length)}
                            />
                        ))}
                    </Input.Group>
                )}
                {questionType === '问答题' && (
                    <TextArea
                        rows={12}
                        value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent}
                        onChange={e => this.answerChange(questionNumber, e.target.value)}
                    />
                )}
            </div>
        )
    }
}

//试题细则
// export default class QuestionFinalDetail extends Component {

//     //作答
//     answerChange = (questionNumber, value, questionType, index, optionLength) => {
//         this.props.answerChange(questionNumber, value, questionType, index, optionLength)
//     }

//     render() {
//         const { questionType, questionNumber, questionStem, questionScore, QuestionOptionViewModels, answerResult } = this.props

//         return (
//             <div className='final-detail' id={`exer${questionNumber}`}>
//                 <div className='final-header'>
//                     <div className='question-number'>
//                         {questionNumber}.[{questionType}] 
//                     </div>
//                     <div className="question-stem" dangerouslySetInnerHTML={{ __html: questionStem }}></div>
//                     <div className="question-score">
//                         ({questionScore}分)
//                     </div>
//                 </div>
//                 {(questionType === '单选题' || questionType === '判断题') && (
//                     <Radio.Group value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent} onChange={e => this.answerChange(questionNumber, e.target.value)} className='radio-group-style'>
//                         <Space direction='vertical' size='middle' style={{ width: '100%' }}>
//                             {QuestionOptionViewModels.map((option, index) => (
//                                 <Radio key={option.id} value={`${index + 1}`} className={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent == (index + 1) ? 'radio-style radio-style-hover' : 'radio-style'}>
//                                     <div className='my-option-radio'>
//                                         <>{numConvertToLetter(index)}. </>
//                                         <div dangerouslySetInnerHTML={{ __html: option.optionContent }}></div>
//                                     </div>
//                                 </Radio>
//                             ))}
//                         </Space>
//                     </Radio.Group>
//                 )}
//                 {questionType === '多选题' && (
//                     <Checkbox.Group value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent} onChange={e => this.answerChange(questionNumber, e, '多选题')} className='checkbox-group-style'>
//                         <Space direction='vertical' size='middle' style={{ width: '100%' }}>
//                             {QuestionOptionViewModels.map((option, index) => (
//                                 <Checkbox key={option.id} value={`${index + 1}`} className={!answerResult.find(ele => ele.questionNumber === questionNumber).answerContent ? 'checkbox-style' : answerResult.find(ele => ele.questionNumber === questionNumber).answerContent.includes(index + 1 + '') ? 'checkbox-style option-selected' : 'checkbox-style'}>
//                                     <div className='my-option-radio'>
//                                         <>{numConvertToLetter(index)}. </>
//                                         <div dangerouslySetInnerHTML={{ __html: option.optionContent }}></div>
//                                     </div>
//                                 </Checkbox>
//                             ))}
//                         </Space>
//                     </Checkbox.Group>
//                 )}
//                 {questionType === '填空题' && (
//                     <Input.Group>
//                         {QuestionOptionViewModels.map((option, index) => (
//                             <Input 
//                                 key={option.id}
//                                 addonBefore={index + 1}
//                                 style={{ marginTop: 12 }}
//                                 value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent[index]}
//                                 onChange={e => this.answerChange(questionNumber, e.target.value, '填空题', index, QuestionOptionViewModels.length)}
//                             />
//                         ))}
//                     </Input.Group>
//                 )}
//                 {questionType === '问答题' && (
//                     <TextArea 
//                         rows={12}
//                         value={answerResult.find(ele => ele.questionNumber === questionNumber).answerContent}
//                         onChange={e => this.answerChange(questionNumber, e.target.value)}
//                     />
//                 )}
//             </div>
//         )
//     }
// }